<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="${base}/static/media/css/bootstrap.css" />
	<script src="${base}/static/index/vendor/jquery/jquery.min.js"></script>
	<script src="${base}/static/index/vendor/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="${base }/static/vendor/bootstrapPager/bootstrapPager.js"></script>
    <script type="text/javascript" charset="utf-8" src="${base }/static/js/My97DatePicker/WdatePicker.js"></script>
    
</head>
<body onload="orderlist(1)" style="font-size:11px;">
<section id="content">
				
<div class="portlet-body">
    <form class="dataform" id="orderlist_form">
    <div class="row">
        <div class="btn-group btn-group-sm btn-group-solid" style="float: right;">
            <a  href="javascript:;" onclick="exportOrder()" class="btn offline_serch_hide" style="margin-right:30px;background: #852B99;color:#fff;border-color:#852B99;"><i class="fa fa-search"></i>导出订单</a>
        </div>
    </div>
    <div style="width: 100%;height: 10px;" ></div>

    <div class="table-scrollable">                         
        <table  class="table table-striped table-bordered table-hover" data-search="true">
            <thead>
                <tr> 
                    <th class="text-center">订单编号</th>
                    <th class="text-center">油卡卡号</th>
                    <th class="text-center">商品名称</th>
                    <th class="text-center">面额</th>
                    <th class="text-center">时间</th>
                    <th class="text-center">订单状态</th>
                    <th class="text-center">操作</th>
                </tr> 
            </thead>
            <tbody id="ordercontent"></tbody>
        </table>
        <!-- 分页开始 -->    
		<ul id="page" class="pagination"></ul>
		<input type="hidden" id="pageNum" name="pageNum" value="1">
		<input type="hidden" id="pageSize" name="pageSize" value="10">
		<!-- 分页结束 -->
    </div>
	</form>
</div>
</section>
<!-- 列表页结束 -->
<div id="order" style="display:none">
	<table class="table table-striped table-bordered table-hover" data-search="true">
        <tr> 
            <td class="text-center"><b>订单编号</b></td>
            <td class="text-center"><b>油卡卡号</b></td>
            <td class="text-center"><b>姓名</b></td>
            <td class="text-center"><b>电话</b></td>
        </tr>
        <tr>
        	<td class="text-center" id="orderNo"></td>
        	<td class="text-center" id="gascardNo"></td>
        	<td class="text-center" id="fillName"></td>
        	<td class="text-center" id="telephone"></td>
        </tr>
        <tr>
        	<td class="text-center"><b>商品名称</b></td>
            <td class="text-center"><b>面额</b></td>
            <td class="text-center"><b>时间</b></td>
            <td class="text-center"><b>订单状态</b></td>
        </tr>
        <tr>
        	<td class="text-center" id="bmItemName"></td>
        	<td class="text-center" id="facePrice"></td>
        	<td class="text-center" id="orderTime"></td>
        	<td class="text-center" id="rechargeState"></td>
        </tr>
	</table>
</div>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/layer/layer.js"></script>
<script type="text/javascript">
	function orderlist(pageNum){
		
		$("#pageNum").val(pageNum)
		//debugger;
		var data = $("#orderlist_form").serializeArray();
		$("#ordercontent").html("")
		$.ajax({
        	url:"${base}/business/order/get",
            type:'post',
            dataType:'json',
            data:data,
            success:function(res)
            {
                $.each(res.data.list, function(i, obj) {  
                	var a = obj;
				    var tr = $('<tr>'); 
                    tr.append('<td class="text-center">'+obj.orderNo+'</td>');
                    tr.append('<td class="text-center">'+obj.gascardNo+'</td>');
                    tr.append('<td class="text-center">'+obj.bmItemName+'</td>');
                    tr.append('<td class="text-center">'+obj.facePrice+'</td>');
                    tr.append('<td class="text-center">'+obj.orderTime+'</td>');
                 	tr.append('<td class="text-center">'+obj.rechargeState+'</td>');
                 	
                    tr.append('<td class="text-center"><input type="button" class="btn btn-success btn-xs" value="查看" onclick="showOrder(\''+obj.orderNo+'\')"/></td>');
                    //订单内容 tbody
                    $("#ordercontent").append(tr);
				});
				var total = res.data.total; // 总条数
				var pages = res.data.pages; // 总页数
				var pageNum = res.data.pageNum; // 当前页
				var pageSize = res.data.pageSize; // 每页显示条数
				
				$("#page").html('').append(Pager({
				    totalCount:total, 		//总条数为150
				    pageSize: pageSize,    			//每页显示6条内容，默认10
				    buttonSize: 5,   		//显示6个按钮，默认10
				    pageNum: pageNum,   		//页码的参数名为'p'，默认为'page'
				    prevButton:'上一页',     //上一页按钮
				    nextButton:'下一页',     //下一页按钮
				    firstButton:'首页',      //第一页按钮
				    lastButton:'末页',       //最后一页按钮

				}));
            }
        });
        return false;
	}
	
	function exportOrder() {
		  var a = document.createElement('a');
		  var data = $("#orderlist_form").serialize();
		  debugger;
		  var url = '${pageContext.request.contextPath}/business/order/export?'+ data;
		  a.href=url;
		  a.click();
	}
	
	function showOrder(orderNo){
		var data = {
			'orderNo' : orderNo
		}
		$.ajax({
			url:"${pageContext.request.contextPath}/business/order/detail",
	        type:'post',
	        dataType:'json',
	        data:data,
	        success:function(res){
	        	if(res.code=='-1'){
	        		lay.msg(res.msg);
	        		return;
	        	}else if(res.code=='0'){
	        		lay.msg(res.msg);
	        		return;
	        	}else{
	        		debugger;
	        		$("#orderNo").html(res.data.orderNo);
	            	$("#gascardNo").text(res.data.gascardNo);
	            	$("#fillName").html(res.data.fillName);
	            	$("#telephone").html(res.data.telephone);
	            	$("#bmItemName").html(res.data.bmItemName);
	            	$("#facePrice").html(res.data.facePrice);
	            	$("#orderTime").html(res.data.orderTime);
	            	$("#receiveName").html(res.data.receiveName);
	            	var state = res.data.rechargeState;
	            	if(state=='0'){
	            		$("#rechargeState").html('充值中');
	            	}else if(state=='1'){
	            		$("#rechargeState").html('成功');
	            	}else if(state=='9'){
	            		$("#rechargeState").html('撤销');
	            	}
	        		layer.open({
	       			  type: 1,
	       			  title: '订单详情',
	       			  shade: 0,
					  shadeClose: true,
	       			  skin: 'layui-layer-rim', //加上边框
	       			  area: ['1000px', '300px'], //宽高
	       			  content: $('#order')
	       			});
	        	} 
	        }
		});
	}
	
</script>


</body>
</html>